<template>
  <div class="container">
    <van-nav-bar title="登录" left-text right-text left-arrow  fixed/>
    <div class='logo'><img src="../assets/images/logo.png" alt=""></div>
    <div class="form">
      <label>账号</label>
      <input type="text" placeholder="请输入登录账号" v-model="account">
    </div>
    <div class="button">
      <van-button type="primary" size="normal" @click="login">登录</van-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "login",
  data() {
    return {
      account: "",
      userInfo:{},
    };
  },
  mounted() {},
  methods: {
      async login(){
        if(this.account&&this.account.length!=11){
          this.$toast('请输入正确的账号');
           return false;
        };
        let params={
            phone:this.account
        };
        const res=await this.$axios.post(this.$api.storeLogin,params);
          if(res.code==1){
            this.userInfo=res.data;
            this.$cookies.set('user_id','1');
            this.$cookies.set('user_id',this.userInfo.id);
            this.$cookies.set('user_id','1');
            this.$cookies.set('user_name',this.userInfo.username);
              this.$router.push('/index');
          }else{
            this.$toast(res.msg);
          };
          
      }
  }
};
</script>
<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0.46rem;
  flex-direction: column;
  font-size:.16rem;
  height:100vh;
}
.form {
  width: 100%;
  background: #fff;
  display:flex;
  align-items: center;
  height:.6rem;
  padding:0 .15rem;
}
label {
    width:.4rem;
}
input {
    padding-left:.15rem;
    width:calc(100% - .4rem);
    border:none;
}
.button {
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-top:.6rem;
}
.van-button{
    width:80%;
}
.logo {
  display:flex;
  justify-content: center;
  align-items: center;
  margin-bottom:.6rem;
}
.logo img {
  width:50%;
}
</style>


